<template>
  <div>
    <div class="switch">
      <div class="switch-left">
        <div class="box1" v-for="(v, index) in obj" :key="index" @click="fun(index)">
          <img :src="v.src" />
          <span>{{ v.txt }}</span>
        </div>
      </div>
      
    </div>

  </div>
</template>
 
 <script>
export default {
  data() {
    return {
      obj: [
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/adea74a9cda8776563189d2d1c5b87e2.png?1660025909823",
          txt: "面霜",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/793fc8ebff50c9404de7fb5401e6ba8b.png?1660025933166",
          txt: "爽肤水",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/e59e77a2c26fa1a32da52f1e09db9594.png?1660025980481",
          txt: "洁面",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/1496a1d30a9e76425ec0b236dc839ef8.png?1660026169012",
          txt: "眼部护理",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/b2899199e7a01276e5ec919a6e476613.png?1660026188554",
          txt: "卸妆",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/561028520356fdc89855e062f9d9a527.jpg?1656387109314",
          txt: "防晒",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/2381a8d66e8abeb0610e408871327a7c.png?1660025959291",
          txt: "精华",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/c0bd308b275f1b5ea97f83c079d9565c.png?1660026006526",
          txt: "乳液",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/2d52e103345922e80119cfd9fd0d3909.jpg?1656395785070",
          txt: "面膜",
        },
        {
          src: "https://pic.cdfgsanya.com/assets/upload/visual/7ce50554013cffc3141f85b4bf9944b9.png?1659942062173",
          txt: "查看更多",
        },
      ],
  
    };
  },
  methods: {
    fun(index) {
      if (index == 0) {
        this.$router.push("/mianshuang");
      }
    },
  },
};
</script>
 
 <style scoped>
.switch {
  width: 98%;
  height: 48.66666667vw;
  /* margin: auto;
     margin-top: 16vw; */
  display: flex;
  overflow: auto;
  background: #f8f6f6;

}
.switch .switch-left {
  width: 98%;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
}
.switch .switch-right {
  width: 60%;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
}
.switch .switch-left .box1 {
  width: 20%;
  height: 50%;
  /* background: yellow; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.switch .switch-right .box1 {
  width: 30%;
  height: 50%;
  /* background: yellow; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.switch .box1 img {
  width: 10.66666667vw;
  margin-bottom: 2.66666667vw;
  border-radius: 50px;
}
.switch .box1 span {
  font-size: 3.2vw;
  color: #666666;
}

</style>